<template>
  <div class="content-sides">
    <div class="content-side content-side-left">
      <div class="main-title-wrapper">
        <div class="main-subtitle">{{ subtitle }}</div>
        <div class="main-title">{{ title }}</div>
        
        <div class="title-description">
          <ul class="ico-links">
            <li>
              <a class="ico-link" href="#" target="_blank">
                <span class="ico-link-img">
                  <img src="@/assets/images/icons/document.svg" alt="document" class="svg">
                </span>
                <span class="ico-link-text">
                  <strong>公司：</strong>山冶工业五金有限公司 <strong>统一社会信用代码：</strong>XXXXXXXXXX
                </span>
              </a>
            </li>
            <li>
              <a class="ico-link" href="#" target="_blank">
                <span class="ico-link-img">
                  <img src="@/assets/images/icons/pin.svg" alt="location" class="svg">
                </span>
                <span class="ico-link-text">
                  <strong>地址：</strong>中国某省某市某区某街道123号
                </span>
              </a>
            </li>
            <li>
              <a class="ico-link" href="mailto:contact@example.com">
                <span class="ico-link-img">
                  <img src="@/assets/images/icons/mail.svg" alt="email" class="svg">
                </span>
                <span class="ico-link-text">
                  <strong>邮箱：</strong>contact@example.com
                </span>
              </a>
            </li>
            <li>
              <a class="ico-link" href="tel:+86-xxx-xxxx-xxxx">
                <span class="ico-link-img">
                  <img src="@/assets/images/icons/phone.svg" alt="phone" class="svg">
                </span>
                <span class="ico-link-text">
                  <strong>电话：</strong>+86-xxx-xxxx-xxxx
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      
      <NextButton v-if="showNextButton" @click="$emit('next')" />
    </div>
    
    <div class="content-side content-side-right">
      <div class="contact-blocks">
        <ContactCard
          v-for="contact in contacts"
          :key="contact.id"
          :name="contact.name"
          :position="contact.position"
          :phone="contact.phone"
          :email="contact.email"
          :photo="contact.photo"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ContactCard from './ContactCard.vue';
import NextButton from './NextButton.vue';

// 导入联系人照片
import kozikPhoto from '@/assets/images/contacts/Kozik.png';
import raykoPhoto from '@/assets/images/contacts/Rayko.png';
import nazakovPhoto from '@/assets/images/contacts/images.png';
import stetskoPhoto from '@/assets/images/contacts/Stetsko.png';
import antonovaPhoto from '@/assets/images/contacts/IMG_5055-scaled.jpg';

interface Contact {
  id: string;
  name: string;
  position: string;
  phone?: string;
  email?: string;
  photo?: string;
}

defineProps<{
  subtitle: string;
  title: string;
  showNextButton?: boolean;
}>();

defineEmits<{
  (e: 'next'): void;
}>();

// 联系人数据
const contacts: Contact[] = [
  {
    id: '1',
    name: '科济克 亚历山大',
    position: '总经理',
    phone: '+375 29 639 00 38',
    email: 'info@aftech.by',
    photo: kozikPhoto
  },
  {
    id: '2',
    name: '赖科 基里尔',
    position: '销售项目负责人',
    phone: '+375 29 350 05 96',
    email: 'rayko@aftech.by',
    photo: raykoPhoto
  },
  {
    id: '3',
    name: '纳扎科夫 丹尼斯',
    position: '不锈钢管道和配件销售工程师',
    phone: '+375 44 501 53 96',
    email: 'nazakov@aftech.by',
    photo: nazakovPhoto
  },
  {
    id: '4',
    name: '斯泰茨科 亚历山大',
    position: '设备和备件销售工程师',
    phone: '+375 44 722 12 21',
    email: 'stetsko@aftech.by',
    photo: stetskoPhoto
  },
  {
    id: '5',
    name: '安东诺娃 叶卡捷琳娜',
    position: '会计',
    phone: '+375 17 270 29 70',
    email: 'accounting@aftech.by',
    photo: antonovaPhoto
  }
];
</script>

<style scoped>
.content-sides {
  width: 100%;
  max-width: 150rem; /* 与screen_content一致 */
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between;
  gap: 4rem;
  animation: fadeIn 0.8s ease-out;
}

.content-side-left {
  width: 40%; /* 与原网站一致 */
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

.main-title-wrapper {
  margin-bottom: 7rem; /* 与原网站一致 */
}

.main-subtitle {
  font-size: 1.8rem;
  color: #e58707; /* 黄色 */
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main-title {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.title-description {
  margin-bottom: 2rem;
}

.ico-links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.ico-links > :not(:last-child) {
  margin-bottom: 2rem;
}

.ico-link {
  display: flex;
  align-items: flex-start;
  color: #828c9f;
  font-size: 1.4rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.ico-link:hover {
  color: #e58707;
}

.ico-link strong {
  color: #fff;
  font-family: ProximaNova sb, sans-serif;
}

.ico-link-img {
  width: 3rem;
  flex-shrink: 0;
  height: 2.6rem;
  display: flex;
  align-items: center;
}

/* SVG图标填充颜色 - 使用fill而不是color */
.ico-link-img img,
.ico-link-img svg {
  max-width: 1.3rem;
  max-height: 1.3rem;
}

.ico-link-img img :deep(svg),
.ico-link-img img :deep(svg *) {
  fill: #e58707 !important;
}

/* 或者使用filter来改变颜色 */
.ico-link-img img {
  filter: brightness(0) saturate(100%) invert(53%) sepia(94%) saturate(1461%) hue-rotate(4deg) brightness(96%) contrast(93%);
}

.ico-link-text {
  flex: 1;
}

.content-side-right {
  width: 60%; /* 与原网站一致 */
}

.contact-blocks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 使用原网站的flexbox布局 */
}

/* 响应式 */
@media (max-width: 1024px) {
  .content-sides {
    padding: 0 2rem;
    gap: 3rem;
  }
  
  .main-title {
    font-size: 6rem;
  }
}

@media (max-width: 768px) {
  .content-sides {
    flex-direction: column;
    padding: 2rem 1.5rem;
  }
  
  .content-side-left {
    width: 100%;
    padding-right: 0;
    margin-bottom: 4rem;
  }
  
  .content-side-right {
    width: 100%;
  }
  
  .main-title {
    font-size: 5rem;
  }
  
  .main-title-wrapper {
    margin-bottom: 3rem;
  }
  
  .contact-blocks {
    width: 100%;
  }
  
  .ico-link {
    font-size: 1.2rem;
  }
  
  .ico-link-img {
    width: 2.4rem;
    height: 2rem;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 3.4rem;
  }
  
  .ico-link {
    font-size: 1.1rem;
  }
}
</style>

